<template>
  <div class="empty-view">
    <div class="icon-wrap">
      <svg-icon class="camera-icon" name="video-camera"></svg-icon>
      <svg-icon class="add-icon" name="video-add"></svg-icon>
    </div>
    <div class="text">双击或选中拖拽左侧设备至此处预览</div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.empty-view {
  width: 100%;
  height: 100%;
  border: 2px dashed #a5b4cb;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 50px;

  .icon-wrap {
    display: flex;
    align-items: flex-end;
    gap: 10px;

    .camera-icon {
      width: 66px;
      height: 51px;
    }

    .add-icon {
      width: 24px;
      height: 24px;
      margin-bottom: 8px;
    }
  }
}
</style>
